/*
 * @Author: xiaosihan 
 * @Date: 2024-10-30 11:18:10 
 * @Last Modified by: xiaosihan
 * @Last Modified time: 2024-10-30 23:08:19
 */

import { autorun } from "mobx";
import { ReactNode, useEffect, useRef, useState } from "react";
import styles from "./rightBottom.module.less";
import Title2 from "@components/Title2/Title2";
import Title3 from "@components/Title3/Title3";
import clsx from "clsx";
import onePng from "./one.png";
import threePNG from "./three.png";
import fivePNG from "./five.png";
import ReactEcharts from 'echarts-for-react';

import getOption0 from "./getOption0";
import getOption1 from "./getOption1";
import getOption2 from "./getOption2";
import getOption3 from "./getOption3";
import getOption4 from "./getOption4";
import getOption5 from "./getOption5";
import getOption6 from "./getOption6";
import modelIntroductionStore from "../modelIntroductionStore";


interface Iprops {
    children?: ReactNode
}

// 逻辑算法应用
export default function RightBottom(props: Iprops) {

    const dom = useRef<HTMLDivElement | null>(null);
    const [data, setData] = useState({});
    const [modelTypeActive, setModelTypeActive] = useState(0);

    // 第几个算法
    const [algorithm, setAlgorithm] = useState(2);

    const [active, setActive] = useState(0);
    const [list, setList] = useState<Array<{ logic: string, algorithm: number }>>([]);

    useEffect(() => autorun(() => {
        const { modelTypeActive } = modelIntroductionStore;
        switch (modelTypeActive) {
            case 0:
                setList([
                    { logic: "失能人员住院或病逝,仍享受长护待遇", algorithm: 2 },
                ]);
                setActive(0);
                setAlgorithm(2);
                break;
            case 1:
                setList([
                    { "logic": "评估专家任务率过高", "algorithm": 0 },
                    { "logic": "护理项目与评估推荐项目匹配度异常", "algorithm": 1 },
                    { "logic": "某一评估专家的评估通过率过高", "algorithm": 0 }
                ]);
                setActive(0);
                setAlgorithm(0);
                break;
            case 2:
                setList([
                    { "logic": "失能人员住院仍有护理记录（入驻机构）", "algorithm": 2 },
                    { "logic": "护理机构入住率畸高", "algorithm": 0 },
                    { "logic": "护理人员/培训师生病住院，但仍存在服务记录", "algorithm": 2 },
                ]);
                setActive(0);
                setAlgorithm(2);
                break;
            case 3:
                setList([
                    { "logic": "护理项目与评估推荐项目匹配度异常", "algorithm": 1 },
                    { "logic": "护理项目频繁使用", "algorithm": 0 },
                    { "logic": "服务计划与实际服务项目不一致", "algorithm": 2 },
                ]);
                setActive(0);
                setAlgorithm(1);
                break;
            case 4:
                setList([
                    { "logic": "辅具适配项目与失能情况不匹配", "algorithm": 4 },
                    { "logic": "配送员、适配师打卡地点和打卡时间区间不合理", "algorithm": 0 }
                ]);
                setActive(0);
                setAlgorithm(4);
                break;
            default:
                break;
        }
    }), []);


    const getOptions = (active: number) => {
        switch (active) {
            case 0:
                return getOption0();
            case 1:
                return getOption1();
            case 2:
                return getOption2();
            case 3:
                return getOption3();
            case 4:
                return getOption4();
            case 5:
                return getOption5();
            case 6:
                return getOption6();
            default:
                return {}
        }
    }

    return (
        <div ref={dom} className={styles.rightBottom} >
            <Title3 left={0} top={0} >逻辑算法应用</Title3>

            <div className={styles.table} >
                <div className={styles.autoScroll}>
                    {
                        (list || []).map((item: any, i: number) => {
                            return (
                                <div
                                    key={i}
                                    onClick={() => {
                                        setActive(i);
                                        setAlgorithm(item.algorithm);
                                    }}
                                    className={clsx((active === i) && styles.active, styles.listItem)}
                                >
                                    <span className={styles.name} >{i + 1}</span>
                                    <span className={styles.value1} >{item.logic}</span>
                                </div>
                            );
                        })
                    }
                </div>

            </div>
            <div className={styles.echart_container}>
                {[0, 3].includes(algorithm) && <img src={onePng} alt="" className={styles.rightImg} />}
                {[2, 5].includes(algorithm) && <img src={threePNG} alt="" className={styles.rightImg} />}
                {[4, 6].includes(algorithm) && <img src={fivePNG} alt="" className={styles.rightImg} />}
                {
                    [1].includes(algorithm) &&
                    <>
                        <div className={styles.sub_title} >聚类分析</div>
                        <ReactEcharts
                            className={styles.chart}
                            option={getOptions(algorithm)}
                        />
                    </>
                }
            </div>
        </div >
    );

}